// 封装头部组件
<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <!-- 第一行 -->
      <div class="header_top">
        <!-- 设置居中的父容器 -->
        <div class="wrapper">
          <div class="left">太原理工大学欢迎你</div>
          <div class="right">学校主页</div>
        </div>
      </div>
      <!-- 第二行 -->
      <div class="header_main">
        <!-- 设置居中容器 -->
        <div class="wrapper">
          <!-- logo -->
          <div class="logo" @click="toHome()" >
            <img src="@/assets/重构图片/LOGO.png" alt=""  />
          </div>
          <!-- 列表 -->
          <ul>
            <li
              :class="$route.query.name===item.name?'current':''"
              v-for="(item, index) in category"
              :key="index.id"
              @click="toJump(item)"
            >
              {{ item.name }}
            </li>
            <!-- <li v-for="item in category" :key="item.id">{{ item.name }}</li> -->
          </ul>
        </div>
      </div>
    </div>
    <!-- /头部 -->
  </div>
</template>
<script>
import { get, post } from "@/utils/request.js";
export default {
  data() {
    return {
      // 资讯列表变量
      category: [],
    };
  },
  methods: {
    // 请求所有资讯分类
    findALLCategory() {
      get("/index/category/findAll").then((res) => {
        console.log(res);
        this.category = res.data;
      });
    },
    // 进行页面跳转 vue 编程式导航
    toJump(item) {
      this.$router.push({
        // 要跳转的路径
        path: "article",
        // 要携带的参数
        query: item,
        // query:{id:item.id,name:item.name}
      });
    },
    toHome() {
      this.$router.push({
        path: "home",
      });
    },
  },
  created() {
    this.findALLCategory();
  },
};
</script>
<style lang="scss">
// 头部样式
.header {
  // 头部第一行样式
  .header_top {
    background-color: #002856;
    // 字体颜色
    color: white;
    // 设置容器居中
    .wrapper {
      width: 75%;
      margin: 0 auto;
      // 清除浮动
      overflow: hidden;
      .left {
        float: left;
      }
      .right {
        float: right;
      }
      .left,
      .right {
        // 行高
        line-height: 3em;
      }
    }
  }
  // 头部第二行
  .header_main {
    background-color: #003262;
    // 设置居中容器
    .wrapper {
      width: 75%;
      margin: 0 auto;
      display: flex;
      // 设置伸缩盒布局
      justify-content: space-between;
      // 使用定位让列表在一行排列
      position: relative;
      height: 100px;
      text-align: center;
      ul {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 20px;
        li {
          padding: 0.8em;
          float: left;
          color: white;
        }
        li:hover {
          background-color: white;
          color: #003262;
          cursor: pointer;
        }
        li.current{
         color: white;
        }
      }
      .logo {
        margin: auto 0;
        img {
          height: 70px;
        }
        img:hover {
          cursor: pointer;
        }
      }
    }
  }
}
</style>